import React from 'react'
import Menu, {SubMenu, MenuItem} from 'rc-menu';
import {WeaTools} from "ecCom";

export default class ContainerViewExtend extends React.Component{

    state = {
        openKeys:[],
        selectedKeys:[],
        isHasIcon: 0,
        isFindIsHasIcon: 1,
        firstSubMenuKey:[],
        isScrolling: false,
    }

    componentWillReceiveProps(nextProps){
        const {menuData,location={}} = nextProps
        const {query={}} = location
        const {selectedKeys=''} = query
        let firstSubMenuKey = []
        for(let i = 0 ;i< menuData.length ;i++){
            firstSubMenuKey.push(menuData[i].id)
        }
        this.setState({firstSubMenuKey,selectedKeys:[]})
        if(selectedKeys !=''){
            this.setState({selectedKeys:JSON.parse(selectedKeys)})
        }
    }


    renderMenuDom = (item)=>{
        const {isHasIcon,isFindIsHasIcon} = this.state
        let icon = ""
        if(isHasIcon == 0){
            icon = ""
        }else if(isHasIcon == 1){
            icon = <div className="menu-title-icon"></div>
        }
        if(item.setting && item.setting != '' && item.setting.split(",")[0].indexOf(".")!=-1){
            if(isFindIsHasIcon == 1){
                this.setState({isHasIcon: 1,isFindIsHasIcon : 0})
            }
            icon = (
                <div className="menu-title-icon-item">
                    <img className="menu-title-icon" src={item.setting.split(",")[0]}/>
                    <div className="middleUtil"></div>
                </div>
            )
        }
        if(item.items && item.items.length > 0){
            return (
                <window.rcMenu.Menu.SubMenu ecId={`${this && this.props && this.props.ecId || ''}_rcMenu.Menu.SubMenu@raadvc`} key={item.id} title={
                    <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_React.Fragment@di2ehr`}>{icon}{item.name}</React.Fragment>
                } onTitleClick={()=>{this.handlerSubMenuOnClick(item)}}>
                    {
                        item.items.map((item,index2)=>{
                            return this.renderMenuDom(item)
                        })
                    }
                </window.rcMenu.Menu.SubMenu>
            )
        }else{
            return (
                <window.rcMenu.Menu.MenuItem ecId={`${this && this.props && this.props.ecId || ''}_rcMenu.Menu.MenuItem@ubq0cp`} key={item.id} data={item}>
                    {icon}{item.name}
                </window.rcMenu.Menu.MenuItem>
            )
        }
    }

    renderSimpleMenuDom = (item)=>{
        const {isHasIcon,isFindIsHasIcon} = this.state
        let icon = ""
        if(isHasIcon == 0){
            icon = ""
        }else if(isHasIcon == 1){
            icon = <div className="menu-title-icon"></div>
        }
        if(item.setting && item.setting != '' && item.setting.split(",")[0].indexOf(".")!=-1){
            if(isFindIsHasIcon == 1){
                this.setState({isHasIcon: 1,isFindIsHasIcon : 0})
            }
            icon = (
                <div className="menu-title-icon-item">
                    <img className="menu-title-icon" src={item.setting.split(",")[0]}/>
                    <div className="middleUtil"></div>
                </div>
            )
        }
        return (
            <window.rcMenu.Menu.MenuItem ecId={`${this && this.props && this.props.ecId || ''}_rcMenu.Menu.MenuItem@85fbd3`} key={item.id} data={item}>
                {icon}{item.name}
            </window.rcMenu.Menu.MenuItem>
        )
    }

    handlerMenuItemOnClick = (menuItem,sid)=>{
        const {openKeys,selectedKeys} = this.state
        const {parentId='',layoutType} = this.props
        let {id,url,openType} = menuItem
        let temp = []
        temp.push(id+"")
        if(this.props.subMenuData && window.portalTs.element.menuPerfect.openSubMenuPerfect == 1 && parentId!=''){
            temp.push(parentId+'')
        }else if(openKeys[0]){
            temp.push(openKeys[0]);
        }else if(sid){
            temp.push(sid)
        }
        if(url && url != ''){
            if(openType == 'mainFrame'){
                const urlObj = WeaTools.checkStdRouter(url) || {};
                if(urlObj.isRouter && urlObj.url){
                    url = urlObj.url;
                    $(".custom-element-menu-page .route").show()
                    $(".custom-element-menu-page .iframe").hide()
                    weaHistory.push({pathname:url+(url.indexOf("?") == -1 ? "?": "&")+"selectedKeys="+JSON.stringify(temp)})
                }else{
                    $(".custom-element-menu-page .route").hide()
                    $(".custom-element-menu-page .iframe").show()
                    if(layoutType === 'theme'){
                        weaHistory.push({pathname:'/main?selectedKeys='+JSON.stringify(temp)})
                    }else{
                        weaHistory.push({pathname:'/?selectedKeys='+JSON.stringify(temp)})
                    }


                    $("#custom-element-menu-iframe").attr({src:url})
                }
            }else if( openType == '_blank'){
                window.open(url,'_blank')
            }else if(openType == '_parent'){
                location.href = url
            }
        }
    }

    handlerSubMenuOnClick = (item,sid)=>{
        const {data} = this.props
        const {setting}  = data
        const {autoOpenMenuItemWhenCheckSubMenu} =setting
        if(autoOpenMenuItemWhenCheckSubMenu == '1'){
            // if(item.url !=""){
            //     this.handlerMenuItemOnClick(item)
            // }else{
            //     let menuItem = this.findMenuItemOfSubMenu(item)
            //     this.handlerMenuItemOnClick(menuItem)
            // }
            let menuItem = this.findMenuItemOfSubMenu(item)
            this.handlerMenuItemOnClick(menuItem,sid)

        }


    }

    handlerSimpleMenuItemOnClick = (item)=>{
        if(item.items && item.items.length > 0){
            this.handlerSubMenuOnClick(item,item.id+'');
        }else{
            this.handlerMenuItemOnClick(item)
        }
        window.portalTs.element.menuPerfect.setSubMenuPerfectData(item.id,item.items)

    }

    findMenuItemOfSubMenu = (item)=>{
        if(item.items && item.items.length > 0){
            return this.findMenuItemOfSubMenu(item.items[0])
        }else{
            return item
        }
    }

    onOpenChange = (openKeys,mode) => {
        if(mode == 1){
            const {firstSubMenuKey} = this.state
            if(openKeys.length > 0){
                if(firstSubMenuKey.find((key)=>key==openKeys[openKeys.length-1])){
                    this.setState({openKeys:[openKeys[openKeys.length-1]]})
                }else{
                    this.setState({openKeys})
                }
                // this.handlerSubMenuOnClick(JSON.parse(openKeys[openKeys.length-1]))
            }else{
                this.setState({openKeys:[]})
            }
        }else{
            this.setState({openKeys:openKeys})
        }


    };

    componentDidUpdate(){

        //获取二级菜单max-height
        let subMenuPoPMaxHeight =  0
        if(this.refs.menuViewExtend){
            let bodyHeight = parseInt(document.body.offsetHeight)
            let elementTop = parseInt(($(this.refs.menuViewExtend).parents(".wea-portal-layout-element")).css("transform").replace(/[^0-9\-,]/g,'').split(',')[5])
            let elementContentTop = parseInt($(this.refs.menuViewExtend)[0].offsetTop)
            let elementContentHeight = parseInt($(this.refs.menuViewExtend)[0].offsetHeight)
            subMenuPoPMaxHeight = bodyHeight-elementTop-elementContentTop-elementContentHeight- ((this.props.isSetting == true || this.props.isSetting == 'true')? 65 : 11)
        }

        const {data,menuData} = this.props
        const {id,setting}  = data
        const {modle,showType,fontSize,menuItemTBSpacing,menuItemLRSpacing,menuItemTBMargin,menuItemLRMargin,radius,menuItemAutoWidth,menuItemWidth,backGroundColorGlobal,backGroundColorMenuItem,fontColor,fontWeight,backGroundColorFirstMenuItemSelected,fontColorFirstMenuItemSelected,fontWeightFirstMenuItemSelected,backGroundColorOtherMenuItemSelected,fontColorOtherMenuItemSelected,fontWeightOtherMenuItemSelected} = setting
        if(menuData && menuData.length > 0){
            if($("#portal-customElement-menuPerfect-style-"+id).length == 0){
                $("head").append("<style id='portal-customElement-menuPerfect-style-"+id+"' type='text/css'></style>")
            }
            let menuCss
            if(this.props.subMenuData){

                menuCss =  (
                    `
             .subMenuPerfect-viewExtend .rc-menu{
                background-color: transparent!important;
             }
              .subMenuPerfect-viewExtend .rc-menu-item, .subMenuPerfect-viewExtend .rc-menu-submenu{
                border-bottom : none!important;
                float: none!important;
             }
            .subMenuPerfect-viewExtend  .rc-menu-horizontal>.rc-menu-item,
            .subMenuPerfect-viewExtend  .rc-menu-horizontal>.rc-menu-submenu>.rc-menu-submenu-title,
            .subMenuPerfect-viewExtend .rc-menu-inline>.rc-menu-item,
            .subMenuPerfect-viewExtend .rc-menu-inline>.rc-menu-submenu>.rc-menu-submenu-title,
            .subMenuPerfect-viewExtend .rc-menu-vertical-left>.rc-menu-item,
            .subMenuPerfect-viewExtend .rc-menu-vertical-left>.rc-menu-submenu>.rc-menu-submenu-title,
            .subMenuPerfect-viewExtend .rc-menu-vertical-right>.rc-menu-item,
            .subMenuPerfect-viewExtend .rc-menu-vertical-right>.rc-menu-submenu>.rc-menu-submenu-title,
            .subMenuPerfect-viewExtend .rc-menu-vertical>.rc-menu-item,
            .subMenuPerfect-viewExtend .rc-menu-vertical>.rc-menu-submenu>.rc-menu-submenu-title{
                 cursor: pointer;
                 padding: ${menuItemTBSpacing+'px '+menuItemLRSpacing + 'px'};
                 margin: ${menuItemTBMargin+"px "+menuItemLRMargin+"px"};
                 background-color: ${backGroundColorMenuItem};
                 font-size: ${fontSize+"px"};
                 color: ${fontColor};
                 font-weight: ${fontWeight == 1 ? 700 : 400};
                 border-radius: ${radius+"px"};
                 overflow: hidden;
                 text-overflow:ellipsis;
                 white-space: nowrap;
                 ${menuItemAutoWidth == '1' ? "width: "+menuItemWidth+"px;" : ""}
             }
             .subMenuPerfect-viewExtend .rc-menu-item-active,.subMenuPerfect-viewExtend .rc-menu-submenu-selected ,.subMenuPerfect-viewExtend .rc-menu.rc-menu-root .rc-menu-submenu-active{
                border-bottom : none!important;
                background-color: transparent;
             }
             
             .subMenuPerfect-viewExtend .rc-menu-horizontal>.rc-menu-item.rc-menu-item-active,
             .subMenuPerfect-viewExtend .rc-menu-horizontal>.rc-menu-item.rc-menu-item-selected,
             .subMenuPerfect-viewExtend .rc-menu-horizontal>.rc-menu-submenu.rc-menu-submenu-active>.rc-menu-submenu-title,
             .subMenuPerfect-viewExtend .rc-menu-inline>.rc-menu-item.rc-menu-item-active,
             .subMenuPerfect-viewExtend .rc-menu-inline>.rc-menu-item.rc-menu-item-selected,
             .subMenuPerfect-viewExtend .rc-menu-inline>.rc-menu-submenu.rc-menu-submenu-active>.rc-menu-submenu-title,
             .subMenuPerfect-viewExtend .rc-menu-vertical-left>.rc-menu-item.rc-menu-item-active,
             .subMenuPerfect-viewExtend .rc-menu-vertical-left>.rc-menu-item.rc-menu-item-selected,
             .subMenuPerfect-viewExtend .rc-menu-vertical-left>.rc-menu-submenu.rc-menu-submenu-active>.rc-menu-submenu-title,
             .subMenuPerfect-viewExtend .rc-menu-vertical-right>.rc-menu-item.rc-menu-item-active,
             .subMenuPerfect-viewExtend .rc-menu-vertical-right>.rc-menu-item.rc-menu-item-selected,
             .subMenuPerfect-viewExtend .rc-menu-vertical-right>.rc-menu-submenu.rc-menu-submenu-active>.rc-menu-submenu-title,
             .subMenuPerfect-viewExtend .rc-menu-vertical>.rc-menu-item.rc-menu-item-active,
             .subMenuPerfect-viewExtend .rc-menu-vertical>.rc-menu-item.rc-menu-item-selected,
             .subMenuPerfect-viewExtend .rc-menu-vertical>.rc-menu-submenu.rc-menu-submenu-active>.rc-menu-submenu-title{
                color: ${fontColorOtherMenuItemSelected};
                font-weight: ${fontWeightOtherMenuItemSelected == 1 ? 700 : 400};
                background-color: ${backGroundColorOtherMenuItemSelected};
             }
             .subMenuPerfect-viewExtend .rc-menu-horizontal.rc-menu-sub,
             .subMenuPerfect-viewExtend .rc-menu-vertical.rc-menu-sub,
             .subMenuPerfect-viewExtend .rc-menu-vertical-left.rc-menu-sub,
             .subMenuPerfect-viewExtend .rc-menu-vertical-right.rc-menu-sub{
                ${menuItemAutoWidth == '1' ? "min-width: " + menuItemWidth + "px;" : ""}
             }
             .subMenuPerfect-viewExtend .rc-menu-submenu-popup>ul{
                ${subMenuPoPMaxHeight <= 0  ? '' : 'max-height: '+ subMenuPoPMaxHeight + 'px;'}
                overflow-y: auto;
                overflow-x: hidden;
             }
             `

                )

            }else{
                menuCss =  (
                    `
             .menuPerfect-viewExtend .rc-menu{
                background-color: transparent!important;
             }
              .menuPerfect-viewExtend .rc-menu-item, .menuPerfect-viewExtend .rc-menu-submenu{
                border-bottom : none!important;
                float: none!important;
             }
            
            
            .menuPerfect-viewExtend .rc-menu-horizontal>.rc-menu-item,
            .menuPerfect-viewExtend .rc-menu-horizontal>.rc-menu-submenu>.rc-menu-submenu-title,
            .menuPerfect-viewExtend .rc-menu-inline>.rc-menu-item,
            .menuPerfect-viewExtend .rc-menu-inline>.rc-menu-submenu>.rc-menu-submenu-title,
            .menuPerfect-viewExtend .rc-menu-vertical-left>.rc-menu-item,
            .menuPerfect-viewExtend .rc-menu-vertical-left>.rc-menu-submenu>.rc-menu-submenu-title,
            .menuPerfect-viewExtend .rc-menu-vertical-right>.rc-menu-item,
            .menuPerfect-viewExtend .rc-menu-vertical-right>.rc-menu-submenu>.rc-menu-submenu-title,
            .menuPerfect-viewExtend .rc-menu-vertical>.rc-menu-item,
            .menuPerfect-viewExtend .rc-menu-vertical>.rc-menu-submenu>.rc-menu-submenu-title{
                 cursor: pointer;
                 padding-top: ${menuItemTBSpacing}px!important;
                 padding-bottom: ${menuItemTBSpacing}px!important;
                 padding-left: ${menuItemLRSpacing}px;
                 padding-right: ${menuItemLRSpacing}px!important;
                 margin: ${menuItemTBMargin+"px "+menuItemLRMargin+"px"};
                 background-color: ${backGroundColorMenuItem};
                 font-size: ${fontSize+"px"};
                 color: ${fontColor};
                 font-weight: ${fontWeight == 1 ? 700 : 400};
                 border-radius: ${radius+"px"};
                 overflow: hidden;
                 text-overflow:ellipsis;
                 white-space: nowrap;
                 ${menuItemAutoWidth == '1' ? "width: "+menuItemWidth+"px;" : ""}
             }
             .menuPerfect-viewExtend .rc-menu-item-active,.menuPerfect-viewExtend .rc-menu-submenu-selected ,.menuPerfect-viewExtend .rc-menu.rc-menu-root .rc-menu-submenu-active{
                border-bottom : none!important;
                background-color: transparent;
             }
             
             .menuPerfect-viewExtend .rc-menu-horizontal>.rc-menu-item.rc-menu-item-active,
             .menuPerfect-viewExtend .rc-menu-horizontal>.rc-menu-item.rc-menu-item-selected,
             .menuPerfect-viewExtend .rc-menu-horizontal>.rc-menu-submenu.rc-menu-submenu-active>.rc-menu-submenu-title,
             .menuPerfect-viewExtend .rc-menu-inline>.rc-menu-item.rc-menu-item-active,
             .menuPerfect-viewExtend .rc-menu-inline>.rc-menu-item.rc-menu-item-selected,
             .menuPerfect-viewExtend .rc-menu-inline>.rc-menu-submenu.rc-menu-submenu-active>.rc-menu-submenu-title,
             .menuPerfect-viewExtend .rc-menu-vertical-left>.rc-menu-item.rc-menu-item-active,
             .menuPerfect-viewExtend .rc-menu-vertical-left>.rc-menu-item.rc-menu-item-selected,
             .menuPerfect-viewExtend .rc-menu-vertical-left>.rc-menu-submenu.rc-menu-submenu-active>.rc-menu-submenu-title,
             .menuPerfect-viewExtend .rc-menu-vertical-right>.rc-menu-item.rc-menu-item-active,
             .menuPerfect-viewExtend .rc-menu-vertical-right>.rc-menu-item.rc-menu-item-selected,
             .menuPerfect-viewExtend .rc-menu-vertical-right>.rc-menu-submenu.rc-menu-submenu-active>.rc-menu-submenu-title,
             .menuPerfect-viewExtend .rc-menu-vertical>.rc-menu-item.rc-menu-item-active,
             .menuPerfect-viewExtend .rc-menu-vertical>.rc-menu-item.rc-menu-item-selected,
             .menuPerfect-viewExtend .rc-menu-vertical>.rc-menu-submenu.rc-menu-submenu-active>.rc-menu-submenu-title{
                color: ${fontColorOtherMenuItemSelected};
                font-weight: ${fontWeightOtherMenuItemSelected == 1 ? 700 : 400};
                background-color: ${backGroundColorOtherMenuItemSelected};
             }
             .menuPerfect-viewExtend .rc-menu-horizontal.rc-menu-sub,
             .menuPerfect-viewExtend .rc-menu-vertical.rc-menu-sub,
             .menuPerfect-viewExtend .rc-menu-vertical-left.rc-menu-sub,
             .menuPerfect-viewExtend .rc-menu-vertical-right.rc-menu-sub{
                ${menuItemAutoWidth == '1' ? "min-width: "+menuItemWidth+"px;" : ""}
             }
             .menuPerfect-viewExtend .rc-menu-submenu-popup>ul{
                ${subMenuPoPMaxHeight <= 0  ? '' : 'max-height: '+ subMenuPoPMaxHeight + 'px;'}
                overflow-y: auto;
                overflow-x: hidden;
             }
             `

                )
            }
            $("#portal-customElement-menuPerfect-style-"+id).html(menuCss)

            if(showType == '0' && modle == "0"){
                $(".rc-menu-overflowed-submenu").css({display:'none'})
                $(".menuitem-overflowed").show()
                $(".menuitem-overflowed").removeClass("menuitem-overflowed")
                $(this.refs.menuViewExtend).find(".rc-menu.rc-menu-root").css({display:'inline-block',position:'relative'})


                const $menu = $(this.refs.menuViewExtend).find(".rc-menu.rc-menu-root")
                const containerWidth = $(this.refs.menuViewExtend).width() - 72;
                const contentWidth = $menu.width();

                if (contentWidth > containerWidth) {
                    this.refs['prev'].style.display = 'block';
                    this.refs['next'].style.display = 'block';
                    $(this.refs.menuViewExtend).find(".rc-menu.rc-menu-root").css({'margin-left':'36px'})
                }else{
                    this.refs['prev'].style.display = 'none';
                    this.refs['next'].style.display = 'none';
                    $(this.refs.menuViewExtend).find(".rc-menu.rc-menu-root").css({'margin-left':'0px'})
                }
            }else{
                $(this.refs.menuViewExtend).find(".rc-menu.rc-menu-root").css({display:'block'})
                $(this.refs.menuViewExtend).find(".rc-menu.rc-menu-root").css({'margin-left':'0px'})
            }
        }


    }


    onNext = ()=> {
        const {isScrolling} = this.state
        const $menu = $(this.refs.menuViewExtend).find(".rc-menu.rc-menu-root");
        const containerWidth =  $(this.refs.menuViewExtend).width() - 72;
        const contentWidth = $menu.width();
        const contentLeft = $menu.position().left;
        if (!isScrolling && (contentWidth + contentLeft > containerWidth)) {
            this.setState({isScrolling:true})
            $menu.animate({left: contentLeft - containerWidth / 2}, 300, function () {
                this.setState({isScrolling:false})
            }.bind(this));
        }
    }

    onPrev = ()=> {
        const {isScrolling} = this.state
        const $menu = $(this.refs.menuViewExtend).find(".rc-menu.rc-menu-root");
        const containerWidth = $(this.refs.menuViewExtend).width() - 72;
        const contentWidth = $menu.width();
        const contentLeft = $menu.position().left;
        if (!isScrolling && contentLeft < 0) {
            this.setState({isScrolling:true})
            $menu.animate({left: contentLeft + containerWidth / 2}, 300, function () {
                this.setState({isScrolling:false})
            }.bind(this));
        }
    }

    render(){
        const {openKeys,selectedKeys} = this.state
        const {data,tabId,menuData} = this.props
        const {items,setting}  = data
        const {modle,showType,showMenuItem,backGroundColorGlobal,isBackGroundTransparent} =setting
        let mode = "horizontal"
        if(modle == '0'){
            mode = "horizontal"
        }else if(modle == '1'){
            mode = "inline"
        }else if(modle == '2'){
            mode = "vertical-left"
        }else if(modle == '3'){
            mode = "vertical-right"
        }
        let item = items.find((element)=>(element.id == tabId))
        let content = null
        if(menuData && menuData.length > 0){
            const defaultSelectedKey = JSON.stringify(menuData[0])
            content = (
                <div style={{position: showType == '0' ? 'relative' : 'static'}}>
                    {
                        (showType == '0' && modle == "0")? (
                            <span ref="prev"  style={{display:'none'}} className="rc-menu-prev" onClick={this.onPrev}><span style={{'vertical-align':'middle'}} className="ant-tabs-tab-prev-icon"/><div className="middleUtil"></div></span>
                        ) : null
                    }
                    {
                        (!this.props.subMenuData && window.portalTs.element.menuPerfect.openSubMenuPerfect == 1) ? (
                            <window.rcMenu.Menu ecId={`${this && this.props && this.props.ecId || ''}_rcMenu.Menu@k7iq3u`}
                                mode={mode}
                                triggerSubMenuAction={showMenuItem == '0' ? 'hover' : 'click'}
                                onClick={(e)=>{this.handlerSimpleMenuItemOnClick(e.item.props.data)}}
                                onSelect={(data)=>{this.setState({selectedKeys:data.selectedKeys})}}
                                selectedKeys={selectedKeys}
                                onOpenChange={(openKeys)=>{this.onOpenChange(openKeys,modle)}}
                                openKeys={openKeys}
                                openAnimation="zoom"
                                subMenuCloseDelay={0.2}
                                getPopupContainer={()=>$(this.props.subMenuData ? ".subMenuPerfect-viewExtend" : ".menuPerfect-viewExtend")[0]}
                                defaultSelectedKeys={[defaultSelectedKey]}
                            >
                                {
                                    menuData.map((item,index)=>{
                                        return (
                                            this.renderSimpleMenuDom(item)
                                        )
                                    })
                                }
                            </window.rcMenu.Menu>
                        )  : (
                            <window.rcMenu.Menu ecId={`${this && this.props && this.props.ecId || ''}_rcMenu.Menu@rm7vke`}
                                mode={mode}
                                triggerSubMenuAction={showMenuItem == '0' ? 'hover' : 'click'}
                                onClick={(e)=>{this.handlerMenuItemOnClick(e.item.props.data)}}
                                onSelect={(data)=>{this.setState({selectedKeys:data.selectedKeys})}}
                                selectedKeys={this.state.selectedKeys}
                                onOpenChange={(openKeys)=>{this.onOpenChange(openKeys,modle)}}
                                openKeys={openKeys}
                                openAnimation="zoom"
                                subMenuCloseDelay={0.2}
                                getPopupContainer={()=>$(this.props.subMenuData ? ".subMenuPerfect-viewExtend" : ".menuPerfect-viewExtend")[0]}
                            >
                                {
                                    menuData.map((item,index)=>{
                                        return (
                                            this.renderMenuDom(item)
                                        )
                                    })
                                }
                            </window.rcMenu.Menu>
                        )
                    }

                    {
                        (showType == '0'  && modle == "0")? (
                            <span ref="next"  style={{display:'none'}} className="rc-menu-next" onClick={this.onNext}><span style={{'vertical-align':'middle'}} className="ant-tabs-tab-next-icon"/><div className="middleUtil"></div></span>
                        ) : null
                    }
                </div>
            )
        }





        return (
            <div className={this.props.subMenuData ? "subMenuPerfect-viewExtend" : "menuPerfect-viewExtend"} style={{'background-color':isBackGroundTransparent == '0' ? backGroundColorGlobal:'transparent'}}   ref="menuViewExtend">
                {content}
            </div>
        )
    }
}

